<template>
  <view class="page bg-white">
    <view class="main">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
        <u-icon :name="item.icon" size="48rpx"></u-icon>
        <view class="flex-1 margin-left-sm">
          <u-text color="#333" size="34rpx" :text="item.title">{{ item.title }}</u-text>
        </view>
        <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
      </view>
      <view class="margin-top-lg">
        <u-button shape="circle" plain size="large" text="退出登录" type="error" @click="logout"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'



// 菜单列表
const menuList = ref([
  {
    id: 1,
    title: '隐私政策',
    icon: '/static/icon/icon-private.png',
    route: '/pages/common/setting/content?type=privacy'
  },
  {
    id: 2,
    title: '用户协议',
    icon: '/static/icon/icon-agreement.png',
    route: '/pages/common/setting/content?type=agreement'
  },
  {
    id: 3,
    title: '关于我们',
    icon: '/static/icon/icon-about.png',
    route: '/pages/common/setting/content?type=about'
  },
])

const handleMenuClick = (item) => {
  // 可以根据需要跳转到对应页面
  uni.navigateTo({
    url: item.route
  })
}

const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorageSync()
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }
    }
  });
}
</script>

<style scoped lang="scss">
/* 用户信息区域背景色 - 临时使用浅蓝色代替渐变 */
.user-section {
  background-color: #E8F4FD;
}

/* 菜单区域间距 */
.menu-section {
  margin-top: 32rpx;
  padding: 0 32rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }
}
</style>